import React from "react";
import { ConfigProvider, Space } from "antd";

const SpaceApp = () => {
  return (
    <div>
      <ConfigProvider space={{ size: 100 }}>
        <Space
          direction="horizontal"
          style={{ height: 200, background: "green" }}
          wrap={true}
          align="center"
          split={
            <div className="w-[100px] h-[100px] bg-red-800  border-1 border-solid border-black "></div>
          }
        >
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
        </Space>
        <Space
          direction="vertical"
          style={{ height: 200, background: "green" }}
          wrap={true}
          align="center"
          size="large"
        >
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
          <div className="w-[100px] h-[100px] bg-pink-300  border-1 border-solid border-black "></div>
        </Space>
      </ConfigProvider>
    </div>
  );
};

export default SpaceApp;
